<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<style type="text/css">
			.ui-paginator {
				text-align: center;
			}
		</style>
	</ui:define>
	
	<ui:define name="content">
	<h1 class="title ui-widget-header ui-corner-all">DataTable - Complex</h1>
	
		<div class="entry"> 
            <p>This example demonstrates various features such as paging, sorting, filtering and selection.</p>
            
              <h:form id="form">

				<p:dataTable var="car" value="#{tableBean.cars}" rowKey="#{car.model}" paginator="true" rows="10"
                            selection="#{tableBean.selectedCar}" selectionMode="single"  filteredValue="#{tableBean.filteredCars}" id="carsTable">
                    
                    <p:ajax event="rowSelect" update=":form:display" oncomplete="carDialog.show()" />

                    <f:facet name="header">
                        List of Cars
                    </f:facet>
					
					<p:column headerText="Model" sortBy="#{car.model}" filterBy="#{car.model}" id="model">
						#{car.model}
					</p:column>
	
					<p:column headerText="Year" sortBy="#{car.year}" filterBy="#{car.year}" id="year">
						#{car.year}
					</p:column>
	
					<p:column headerText="Manufacturer" sortBy="#{car.manufacturer}" filterBy="#{car.manufacturer}" id="manufacturer">
						#{car.manufacturer}
					</p:column>
	
					<p:column headerText="Color" sortBy="#{car.color}" filterBy="#{car.color}" id="color">
						#{car.color}
					</p:column>

				</p:dataTable>
				
				<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
                          width="200" showEffect="explode" hideEffect="explode">

                    <h:panelGrid id="display" columns="2" cellpadding="4">

                        <f:facet name="header">
                            <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
                        </f:facet>

                        <h:outputText value="Model:" />
                        <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold" id="model"/>

                        <h:outputText value="Year:" />
                        <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold" id="year"/>

                        <h:outputText value="Manufacturer:" />
                        <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold" id="manufacturer"/>

                        <h:outputText value="Color:" />
                        <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold" id="color"/>
                    </h:panelGrid>
                </p:dialog>
			
		</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="datatableComplex.xhtml">
					<pre name="code" class="xml">
&lt;h:form id="form"&gt;

    &lt;p:dataTable var="car" value="\#{tableBean.cars}" rowKey="\#{car.model}" paginator="true" rows="10"
                selection="\#{tableBean.selectedCar}" selectionMode="single" filteredValue="\#{tableBean.filteredCars}" id="carsTable"&gt;

        &lt;p:ajax event="rowSelect" update=":form:display" oncomplete="carDialog.show()" /&gt;

        &lt;f:facet name="header"&gt;
            List of Cars
        &lt;/f:facet&gt;

        &lt;p:column headerText="Model" sortBy="\#{car.model}" filterBy="\#{car.model}" id="model"&gt;
            \#{car.model}
        &lt;/p:column&gt;

        &lt;p:column headerText="Year" sortBy="\#{car.year}" filterBy="\#{car.year}" id="year"&gt;
            \#{car.year}
        &lt;/p:column&gt;

        &lt;p:column headerText="Manufacturer" sortBy="\#{car.manufacturer}" filterBy="\#{car.manufacturer}" id="manufacturer"&gt;
            \#{car.manufacturer}
        &lt;/p:column&gt;

        &lt;p:column headerText="Color" sortBy="\#{car.color}" filterBy="\#{car.color}" id="color"&gt;
            \#{car.color}"
        &lt;/p:column&gt;

    &lt;/p:dataTable&gt;

    &lt;p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
              width="200" showEffect="explode" hideEffect="explode"&gt;

        &lt;h:panelGrid id="display" columns="2" cellpadding="4"&gt;

            &lt;f:facet name="header"&gt;
                &lt;p:graphicImage value="/images/cars/\#{tableBean.selectedCar.manufacturer}.jpg"/&gt;
            &lt;/f:facet&gt;

            &lt;h:outputText value="Model:" /&gt;
            &lt;h:outputText value="\#{tableBean.selectedCar.model}" id="model"/&gt;

            &lt;h:outputText value="Year:" /&gt;
            &lt;h:outputText value="\#{tableBean.selectedCar.year}" id="year"/&gt;

            &lt;h:outputText value="Manufacturer:" /&gt;
            &lt;h:outputText value="\#{tableBean.selectedCar.manufacturer}" id="manufacturer"/&gt;

            &lt;h:outputText value="Color:" /&gt;
            &lt;h:outputText value="\#{tableBean.selectedCar.color}" id="color"/&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
                    </pre>
				</p:tab>
				
<p:tab title="TableBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

import org.primefaces.examples.domain.Car;
import org.primefaces.model.PrimeDataModel;

public class TableBean implements Serializable {

	private final static String[] colors;

	private final static String[] manufacturers;

	static {
		colors = new String[10];
		colors[0] = "Black";
		colors[1] = "White";
		colors[2] = "Green";
		colors[3] = "Red";
		colors[4] = "Blue";
		colors[5] = "Orange";
		colors[6] = "Silver";
		colors[7] = "Yellow";
		colors[8] = "Brown";
		colors[9] = "Maroon";

		manufacturers = new String[10];
		manufacturers[0] = "Mercedes";
		manufacturers[1] = "BMW";
		manufacturers[2] = "Volvo";
		manufacturers[3] = "Audi";
		manufacturers[4] = "Renault";
		manufacturers[5] = "Opel";
		manufacturers[6] = "Volkswagen";
		manufacturers[7] = "Chrysler";
		manufacturers[8] = "Ferrari";
		manufacturers[9] = "Ford";
	}

    private List&lt;Car&gt; filteredCars;

	private List&lt;Car&gt; cars;

	private Car selectedCar;

	private Car[] selectedCars;

	public TableBean() {
		cars = new ArrayList&lt;Car&gt;();
		
		populateRandomCars(cars, 50);
	}

	public Car getSelectedCar() {
		return selectedCar;
	}

	public void setSelectedCar(Car selectedCar) {
		this.selectedCar = selectedCar;
	}

	private void populateRandomCars(List&lt;Car&gt; list, int size) {
		for(int i = 0 ; i &lt; size ; i++)
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
	}

	private int getRandomYear() {
		return (int) (Math.random() * 50 + 1960);
	}

	private String getRandomColor() {
		return colors[(int) (Math.random() * 10)];
	}

	private String getRandomManufacturer() {
		return manufacturers[(int) (Math.random() * 10)];
	}

	private String getRandomModel() {
		return UUID.randomUUID().toString().substring(0, 8);
	}

    public List&lt;Car&gt; getFilteredCars() {
        return filteredCars;
    }

    public void setFilteredCars(List&lt;Car&gt; filteredCars) {
        this.filteredCars = filteredCars;
    }

    public List&lt;Car&gt; getCars() {
        return cars;
    }
}
                    </pre>
                </p:tab>
                
                <p:tab title="CarDataModel.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.List;
import org.primefaces.examples.domain.Car;
import org.primefaces.model.PrimeDataModel;

public class CarDataModel extends PrimeDataModel&lt;Car&gt; {

    public CarDataModel() {
    }

    public CarDataModel(Object data) {
        super(data);
    }
    
    @Override
    public Car getRowData(String rowKey) {
        //In a real app, a more efficient way like a query by rowKey should be implemented to deal with huge data
        
        List&lt;Car&gt; cars = (List&lt;Car&gt;) getWrappedData();
        
        for(Car car : cars) {
            if(car.getModel().equals(rowKey))
                return car;
        }
        
        return null;
    }

    @Override
    public String getRowKey(Car car) {
        return car.getModel();
    }
}
                    </pre>
                </p:tab>
			</p:tabView>
</div>

	</ui:define>
</ui:composition>
